<template>
  <div class="activity-container">
    <div class="header">
      <div class="back-btn btn-sword" @click="goBack">返回</div>
      <div class="title brush-title">月度签到</div>
      <div class="placeholder"></div>
    </div>

    <div class="panel-container">
      <div class="panel-header">
        <div class="panel-title">{{ currentMonthYear }}</div>
        <div class="panel-subtitle">本月签到：{{ signedDays }}/{{ calendar.length }}</div>
      </div>

      <div class="calendar-grid">
        <div 
          v-for="(day, idx) in calendar" 
          :key="idx" 
          class="calendar-cell"
          :class="{ signed: day.signed, today: idx + 1 === today }"
          @click="signDay(day)"
        >
          <div class="day">{{ idx + 1 }}</div>
          <div class="reward">{{ day.reward }}</div>
          <div class="status">{{ day.signed ? '已签' : '未签' }}</div>
        </div>
      </div>

      <div class="bottom-tip">连续签到可获得额外奖励</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const now = new Date()
    const monthDays = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()
    return {
      today: now.getDate(),
      signedDays: 5,
      calendar: Array.from({ length: monthDays }).map((_, i) => ({ reward: i % 5 === 0 ? '大礼' : '礼物', signed: i < 5 }))
    }
  },
  computed: {
    currentMonthYear() {
      const now = new Date()
      return `${now.getFullYear()}年${now.getMonth() + 1}月`
    }
  },
  methods: {
    goBack() { uni.navigateBack() },
    signDay(day) {
      if (day.signed) {
        uni.showToast({ title: '今天已签到', icon: 'none' })
        return
      }
      day.signed = true
      this.signedDays += 1
      uni.showToast({ title: '签到成功', icon: 'success' })
    }
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
.activity-container { padding-bottom: 30rpx; }
.header { display:flex; justify-content:space-between; align-items:center; padding:30rpx 40rpx; }
.placeholder{ width:80rpx; }
.panel-container { padding: 20rpx; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 20rpx; }
.panel-title { font-weight: 600; }
.panel-subtitle { color: #666; font-size: 24rpx; }
.calendar-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 16rpx; }
.calendar-cell { padding: 20rpx; border: 1px solid #eee; border-radius: 12rpx; text-align:center; }
.calendar-cell.signed { border-color: #67c23a; }
.calendar-cell.today { border-color: #409eff; }
.day{ font-weight: 600; }
.reward{ color:#666; margin: 8rpx 0; }
.status{ font-size: 22rpx; color:#666; }
.bottom-tip{ margin-top: 20rpx; color:#888; font-size: 24rpx; }
/* 统一武侠风与白卡片样式 */
.activity-container {
  min-height: 100vh;
  background-color: #f8f6f1;
  background-image: radial-gradient(circle at 20% 15%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%),
                    radial-gradient(circle at 80% 85%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%);
  padding-bottom: 30rpx;
}
.header { color:#4b3a2a; border-bottom:1rpx solid #d8c7a3; }
.brush-title { font-family:'Ma Shan Zheng','Kaiti SC','STKaiti',serif; font-size:40rpx; color:#2e1a0f; letter-spacing:2rpx; }
.btn-sword { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:10rpx 32rpx 10rpx 28rpx; background:#6b4f3b; color:#fff; border-radius:8rpx; border:1rpx solid #4b3a2a; overflow:visible; }
.btn-sword::before{ content:""; position:absolute; right:-14rpx; top:50%; transform:translateY(-50%); width:0; height:0; border-top:10rpx solid transparent; border-bottom:10rpx solid transparent; border-left:14rpx solid #6b4f3b; }
.btn-sword::after{ content:""; position:absolute; left:-10rpx; top:50%; transform:translateY(-50%); width:6rpx; height:26rpx; background:#4b3a2a; border-radius:2rpx; }
.panel-container { margin:30rpx; padding:34rpx; border-radius:16rpx; background:#fff; border:1rpx solid #e2d6bd; box-shadow:0 6rpx 20rpx rgba(75,58,42,0.08); }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24rpx; }
.calendar-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 24rpx; grid-gap: 24rpx; }
.calendar-cell { padding: 24rpx; border: 1rpx solid #d8c7a3; border-radius: 12rpx; background:#fbf9f3; box-shadow:0 4rpx 12rpx rgba(75,58,42,0.06); }
.calendar-cell.signed { background:linear-gradient(135deg, #ece3d6 0%, #fbf9f3 100%); border-color:#c89a5b; }
.calendar-cell.today { border-color:#8c6b52; box-shadow:0 0 0 2rpx rgba(140,107,82,0.3) inset; }
.day{ color:#2e1a0f; }
.reward{ color:#7a6a5c; }
.status{ color:#7a6a5c; }
.bottom-tip{ margin-top: 20rpx; color:#7a6a5c; font-size: 24rpx; text-align:center; }
</style>